<template>

  <div class="container">
<template>
  <v-row justify="center">
    <v-dialog
      v-model="dialog"
      persistent
    >
      <template v-slot:activator="{ on, attrs }">
        <v-btn
          color="primary"
          dark
          v-bind="attrs"
          v-on="on"
        >
          Open Dialog
        </v-btn>
      </template>
      <v-card>
        <v-card-title>
          <span class="headline">个人数据查询</span>
        </v-card-title>
        <v-card-text>
          <v-container>
            <v-row>
              <v-col
                cols="12"
                sm="6"
                md="4"
                
              >
                <v-card-text class="red align-start">姓名：丁大将</v-card-text>
                
              </v-col>
              <v-col
                cols="12"
                sm="6"
                md="4"
              >
                <v-text-field
                  label="身份证号"
                ></v-text-field>
              </v-col>
              <v-col
                cols="12"
                sm="6"
                md="4"
              >
                <v-text-field
                  label="参保企业"
                ></v-text-field>
              </v-col>
              <v-col cols="12">
                <v-text-field
                  label="Email*"
                  required
                ></v-text-field>
              </v-col>
              <v-col cols="12">
                <v-text-field
                  label="Password*"
                  type="password"
                  required
                ></v-text-field>
              </v-col>
              <v-col
                cols="12"
                sm="6"
              >
                <v-select
                  :items="['0-17', '18-29', '30-54', '54+']"
                  label="Age*"
                  required
                ></v-select>
              </v-col>
              <v-col
                cols="12"
                sm="6"
              >
                <v-autocomplete
                  :items="['Skiing', 'Ice hockey', 'Soccer', 'Basketball', 'Hockey', 'Reading', 'Writing', 'Coding', 'Basejump']"
                  label="Interests"
                  multiple
                ></v-autocomplete>
              </v-col>
            </v-row>
          </v-container>
          <small>*indicates required field</small>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="blue darken-1"
            text
            @click="dialog = false"
          >
            Close
          </v-btn>
          <v-btn
            color="blue darken-1"
            text
            @click="dialog = false"
          >
            Save
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-row>
</template>

    <v-form ref="form" v-model="valid" lazy-validation>
      <v-text-field
        v-model="name"
        :counter="10"
        :rules="nameRules"
        label="Name"
        required
      ></v-text-field>

      <v-text-field
        v-model="email"
        :rules="emailRules"
        label="E-mail"
        required
      ></v-text-field>

      <v-select
        v-model="select"
        :items="items"
        :rules="[(v) => !!v || 'Item is required']"
        label="Item"
        required
      ></v-select>

      <v-checkbox
        v-model="checkbox"
        :rules="[(v) => !!v || 'You must agree to continue!']"
        label="Do you agree?"
        required
      ></v-checkbox>

      <v-btn :disabled="!valid" color="success" class="mr-4" @click="validate">
        Validate
      </v-btn>

      <v-btn color="error" class="mr-4" @click="reset"> Reset Form </v-btn>

      <v-btn color="warning" @click="resetValidation"> Reset Validation </v-btn>
    </v-form>
    <v-file-input 
    filled
    dense
    show-size
    label="请选择文件（xls或xlsx）" 
    accept=".xls, .xlsx" 
    @change="uploadFile"
    >
      <!-- <input type="file" name="file" id="file" accept=".xls, .xlsx" background="none" @change="uploadFile"/>请上传文件 -->
    </v-file-input>
    <download-excel
      class="btn btn-default"
      :data="json_data"
      :fields="json_fields"
      worksheet="My Worksheet"
      type="xls"
      name="filename.xls"
    >
      Download Excel (you can customize this with html code!)
    </download-excel>
    <v-snackbar v-model="snackbar" :timeout="timeout" top>
      {{ text }}

      <template v-slot:action="{ attrs }">
        <v-btn color="blue" text v-bind="attrs" @click="snackbar = false">
          Close
        </v-btn>
      </template>
    </v-snackbar>
    <v-btn 
    @click="overlayPerson = true"
    >
    个人数据
    </v-btn>
    <v-overlay :value="overlayPerson">
      <v-container
    >
    <v-card class="white">
    个人数据查询
      <v-row
      class=""
      >
        <v-col
          v-for="n in 3"
          :key="n"
          class="red"
        >
        <v-row>姓名：丁大将</v-row>
        </v-col>
        
      </v-row>
      <v-row>
      <v-col
      v-for="n in 4"
          :key="n"
          cols="12"
          sm="6"
          md="3"
        >
          <v-text-field
            label="Regular"
            filled
            disabled
            dense
          ></v-text-field>
        </v-col>
        </v-row>
      <v-row>
      <v-col
      v-for="n in 3"
          :key="n"
          cols="12"
          sm="6"
          md="2"
        >
          <v-text-field
            label="Regular"
            filled
            disabled
            dense
          ></v-text-field>
        </v-col>
        <v-col
          cols="12"
          sm="6"
          md="6"
        >
          <v-text-field
            label="Regular"
            filled
            disabled
            dense
          ></v-text-field>
        </v-col>

        </v-row>
         <v-row>
      <v-col
          cols="12"
          sm="6"
          md="12"
        >
          <v-text-field
        dark
            label="Regular"
            filled
            value="东东"
            dense
          ></v-text-field>
        </v-col>
        </v-row>
        <v-row>
      <v-col
      v-for="n in 4"
          :key="n"
          cols="12"
          sm="6"
          md="3"
        >
          <v-text-field
            label="Regular"
            filled
            disabled
            dense
          ></v-text-field>
        </v-col>
        </v-row>
         <v-row>
      <v-col
      v-for="n in 4"
          :key="n"
          cols="12"
          sm="6"
          md="3"
        >
          <v-text-field
            label="Regular"
            filled
            disabled
            dense
          ></v-text-field>
        </v-col>
        </v-row>
        <v-card-actions>
       <v-spacer></v-spacer>
        <v-btn
          text
          @click="overlayPerson=false"
          class="grey-text"
        >
          返回
        </v-btn>
        
      </v-card-actions>
    </v-card>
    </v-container>
    </v-overlay>
  </div>
</template>

<script>
import XLSX from "xlsx";
export default {
  data: () =>({
    dialog : false,
    alignments: [
        'start',
        'center',
        'end',
      ],
    overlayPerson:false,
    snackbar: false,
    text: "My timeout is set to 2000.",
    timeout: 2000,
    json_fields: {
      "Complete name": "name",
      City: "city",
      Telephone: "phone.mobile",
      "Telephone 2": {
        field: "phone.landline",
        callback: (value) => {
          return `Landline Phone - ${value}`;
        },
      },
    },
    json_data: [
      {
        name: "Tony Peña",
        city: "New York",
        country: "United States",
        birthdate: "1978-03-15",
        phone: {
          mobile: "1-541-754-3010",
          landline: "(541) 754-3010",
        },
      },
      {
        name: "Thessaloniki",
        city: "Athens",
        country: "Greece",
        birthdate: "1987-11-23",
        phone: {
          mobile: "+1 855 275 5071",
          landline: "(2741) 2621-244",
        },
      },
    ],
    valid: true,
    name: "",
    nameRules: [
      (v) => !!v || "Name is required",
      (v) => (v && v.length <= 10) || "Name must be less than 10 characters",
    ],
    email: "",
    emailRules: [
      (v) => !!v || "E-mail is required",
      (v) => /.+@.+\..+/.test(v) || "E-mail must be valid",
    ],
    select: null,
    items: ["Item 1", "Item 2", "Item 3", "Item 4"],
    checkbox: false,
  }),

  methods: {
    validate() {
      this.$refs.form.validate();
    },
    reset() {
      this.$refs.form.reset();
    },
    resetValidation() {
      this.$refs.form.resetValidation();
    },
    async uploadFile1(event) {
      console.log(event);
    },
    async uploadFile(event) {
      try {
        if (typeof event == "undefined") {
          return;
        }
        const file = event;
        const types = file.name.split(".")[1];
        const fileType = ["xlsx", "xls"].some((item) => item === types);
        if (!fileType) {
          this.snackbar = true;
          return (this.text = "文件类型错误，请重新选择"); //注意此处的$snackbar()是vuetify框架中的组件，此处改为自己使用的组件即可
        }
        let fileList = [];
        let tabJson = await this.file2Xce(file);
        if (tabJson && tabJson.length > 0) {
          this.xlsxJson = tabJson;
          fileList = this.xlsxJson[0].sheet;
          console.log(fileList);
          //event.target.value = ""; // 解决上传相同附件只传一次问题，可以参考博文：https://blog.csdn.net/weixin_43363871/article/details/106716737
        }
      } catch (error) {
        console.log(error);
      }
    },
    file2Xce(file) {
      return new Promise((resolve) => {
        const reader = new FileReader();
        reader.onload = function (e) {
          const data = e.target.result;
          this.wb = XLSX.read(data, {
            type: "binary",
          });
          const result = [];
          const sheet2JSONOpts = {
            defval: "", //给defval赋值为空的字符串
          };
          this.wb.SheetNames.forEach((sheetName) => {
            result.push({
              sheetName: sheetName,
              sheet: XLSX.utils.sheet_to_json(
                this.wb.Sheets[sheetName],
                sheet2JSONOpts //当excel内容为空时若不加此属性没有相应的字段，可以取消试试效果
              ),
            });
          });
          resolve(result);
        };
        reader.readAsBinaryString(file);
      });
    },
  },
};
</script>